import React, { PureComponent } from 'react'
// import PropTypes from 'prop-types'
import TagInfo from './info'
import TagRelated from './related'
import TagVideo from './video'
import { tagApi } from '@/api'
export default class TagPage extends PureComponent {

    state = {
        info: null,
        tags: [],
        videos: [],
        videoTotal: 0
    }
    
    initData = () => {
        this.getData()
        this.getRelated()
        this.getVideos()
    }

    getData = async () => {
        try {
            const { match: { params: { id } } } = this.props
            const { data } = await tagApi.getInfo({
                tag_id: id
            })
            this.setState({
                info: data
            })
        } catch (error) {
            
        }
    }

    getRelated = async () => {
        try {
            const { match: { params: { id } } } = this.props
            const { data } = await tagApi.getRelated({
                tag_id: id
            })
            this.setState({
                tags: data
            })
        } catch (error) {
            
        }
    }

    getVideos = async () => {
        try {
            const { match: { params: { id } } } = this.props
            const { data, total } = await tagApi.getVideos({
                tid: id
            })
            if (data) {
                this.setState({
                    videos: data,
                    videoTotal: total
                })
            }
        } catch (error) {
            
        }
    }

    componentDidMount() {
        this.initData()        
    }

    componentDidUpdate(prevProps) {
        const prevTid = prevProps.match.params.id
        const tid = this.props.match.params.id
        if (prevTid !== tid) {
            this.initData() 
        }
    }

    render() {
        const { info, tags, videoTotal, videos } = this.state
        return (
            <>
                { info && 
                    <TagInfo 
                        pic={info.cover}
                        name={info.tag_name} 
                        follow={info.count.atten} 
                        videos={videoTotal}
                        focused={info.is_atten !== 0} 
                    /> 
                }
                { tags.length > 0 && <TagRelated list={tags} /> }
                { videos.length > 0 && <TagVideo list={videos} /> }
            </>
        )
    }
}
